<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>


    按下回车键，传入事件。
    <input type="text" v-model="message" @keyup="doAdd($event)" />

    <button @click="doAdd($event)">增加</button>

    <hr />

    <h2 v-if="isOk">isOk:true</h2>
    <h2 v-if="!isOk">isOk:false</h2>

    <hr />

    <h2>开发中</h2>

    <ul>
      <li v-for="(item,key) in list" v-if="!item.displayFlag">
        <input type="checkbox" v-model="item.displayFlag" @change="saveList()"/>
        {{key}} : {{item.title}} --- <button data-id="key" v-on:click="doDelete(key)">删除</button>
      </li>
    </ul>

    <h2>已完成</h2>

    <ul class="finish">
      <li v-for="(item,key) in list" v-if="item.displayFlag">
        <input type="checkbox" v-model="item.displayFlag" @change="saveList()" />
        {{key}} : {{item.title}} --- <button data-id="key" v-on:click="doDelete(key)" >删除</button>

      </li>
    </ul>

    <h2>获取list的值</h2>

    <button v-on:click="getList">获取list的值</button>

  </div>
</template>

<script>
import storage from "./model/storage.js";

export default {
  name: "app",
  data() {
    return {
      msg: "欢迎来到vue",
      isOk: true,

      message: "",
      list: [
        { title: "Java", displayFlag: true },
        { title: ".net", displayFlag: false }
      ]
    };
  },
  methods: {
    //每次 添加，修改，删除都保存到本地
    doAdd(e) {
      //enter键的值为13
      console.log(e.keyCode);

      //获取文本框的值
      if (e.keyCode == 13) {
        this.list.push({
          title: this.message,
          displayFlag: false
        });
        this.message = "";
      }

      storage.set("list", this.list);
    },
    doDelete(key) {
      //在key的位置删除一个节点
      this.list.splice(key, 1);
      storage.set("list", this.list);
    },
    getList() {
      console.log(this.list);
    },
    saveList() {
      storage.set("list", this.list);
    }
  },
  // 生命周期函数，vue页面刷新就会刷新的方法。
  mounted() {
    var list = JSON.parse(localStorage.getItem("key"));
    if (list) {
      this.list = list;
    }
  }
};
</script>

<style lang="scss">
.finish {
  li {
    background: #eee;
  }
}
</style>